/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Divider, Cascader } from 'antd';
import KbModal from '@/components/KbModal';
import { connect } from "dva";
import patterns from '@/utils/patterns'

const FormItem = Form.Item;
const { contact } = patterns

@connect(({ loading, clientManage })=>({
  clientManage,
  editClientInfo: loading.effects['clientManage/editClientInfo'],
  addClientInfo: loading.effects['clientManage/addClientInfo'],
  getCourierInfo: loading.effects['clientManage/getCourierInfo'],
  getCascaderInfo: loading.effects['clientManage/getCascaderInfo'],
}))
@Form.create()
export default class Modal extends Component {
  state = {
    loading: false,
    courierInfo: [],
    courier_phone: ""
  }
  componentDidMount(){
    const { dispatch } = this.props
    dispatch({
      type:"clientManage/getCascaderInfo"
    })
  }

  onOk = ()=> {
    const { hideModal, form, dispatch, editClientInfo, searchFormValue, record } = this.props
    const { courier_phone } = this.state
    this.setState({loading:true})
    let values
    
    form.validateFields((err, fieldsValue)=>{
      if(err){
        this.setState({loading: false})
        return
      }
      values = {
        ...fieldsValue
      }
      if( fieldsValue.courier_phone.length > 0 ){
        values.courier_phone = courier_phone
      }
      if( record ){ //修改需要id
        values.id = record.id
      }
      //判断是否是新增还是修改
      let type = record ? "clientManage/editClientInfo" : "clientManage/addClientInfo"

      dispatch({
        type,
        payload:{
          ...values
        }
      }).then((res)=>{
        dispatch({
          type:"clientManage/getClientManageList",
          payload: {
            ...searchFormValue
          }
        })
        hideModal()
        this.setState({loading:false})
      }).catch(err=>{
        this.setState({loading:false})
      })
    })
    
  }

  filter = (inputValue, path)=> {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  }

  displayRender = (label)=> {
    return label[1]
  }

  onCascaderChange(value, selectedOptions){
    selectedOptions.length > 0 && this.setState({ //设置业务员手机号
      courier_phone: selectedOptions[1].courier_phone
    })
  }

  render() {
    const { loading } = this.state
    const { 
      hideModal,
      visible,
      title,
      type,
      record,
      form: { getFieldDecorator },
      clientManage: { cascaderInfo },
      ...restProps
    } = this.props

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <KbModal
        loading={loading}
        cancelText="取消"
        title={title}
        visible={visible}
        onCancel={hideModal}
        onOk={this.onOk}
        width={600}
        {...restProps}
      >
        {
          <Form  {...formItemLayout} >
            <div>客户信息：</div>
            <FormItem label="公司名称">
              {
                getFieldDecorator('companyName',{
                  initialValue: type === 'edit' ? record.customer : '',
                  rules: [{
                    required: true,
                    message: '请输入公司名称！',
                  }]
                })(
                  <Input 
                    placeholder='请输入公司名称'
                  />
                )
              }
            </FormItem>
            <FormItem label="联系人">
              {
                getFieldDecorator('userName',{
                  initialValue: type === 'edit' ? record.linkman_name : '',
                  rules: [{
                    required: true,
                    message: '请输入联系人！',
                  }]
                })(
                  <Input 
                    placeholder='请输入联系人'
                  />
                )
              }
            </FormItem>
            <FormItem label="联系人电话">
              {
                getFieldDecorator('mobile',{
                  initialValue:  type === 'edit' ? record.linkman_mobile : '',
                  rules: [
                    {
                      required: true,
                      message: '请输入联系人电话！',
                    },{
                      ...contact
                    }
                  ]
                })(
                  <Input 
                    placeholder='请输入联系人电话'
                  />
                )
              }
            </FormItem>
            <FormItem label="回款信息" extra="格式：渠道：账号，例如 农业银行：6222283648284900">
              {
                getFieldDecorator('remark',{
                  initialValue:  type === 'edit' ? record.remark : ''
                })(
                  <Input 
                    placeholder='请输入回款信息'
                  />
                )
              }
            </FormItem>
            <Divider/>
            <div>业务员信息：</div>
            <FormItem label="业务员姓名">
              {
                getFieldDecorator('courier_phone',{
                  initialValue: type === 'edit' ? [record.company_site_id,record.courier_phone] : '',
                  rules: [{
                    required: true,
                    message: '请输入或选择业务员姓名！',
                  }]
                })(
                  <Cascader
                    expandTrigger="click"
                    options={cascaderInfo}
                    displayRender={this.displayRender}
                    placeholder="可根据业务员手机、姓名搜索"
                    showSearch={{ filter: this.filter }}
                    onChange={this.onCascaderChange.bind(this)}
                  />,
                )
              }
            </FormItem>
          </Form>
        }
      </KbModal>
    )
  }
}

Modal.propTypes = {
  visible: PropTypes.bool,
  wrappedComponentRef: PropTypes.func,
  onOk: PropTypes.func,
  okText: PropTypes.string,
  title: PropTypes.string,
  onCancel: PropTypes.func,
  status: PropTypes.number,
  changeActiveKey: PropTypes.func
}
